<script setup lang="ts">
import { OrderType } from '@/types/enum'

defineProps<{
  orders: {
    orderType: OrderType
    price: string
    time: string
    distance: string
    from: string
    to: string
    distanceFromStart: string
  }[]
}>()

defineEmits(['close'])

function title(orderType: OrderType) {
  const titles = {
    [OrderType.包车]: '快车',
    [OrderType.代叫]: '代叫',
    [OrderType.捎件]: '捎件',
    // 这个卡片不会显示城际合成，写到这里只是为了防止 TS 报错
    [OrderType.城际合成]: '城际合成',
  }
  return titles[orderType]
}
</script>

<template>
  <view class="absolute left-1/2 top-1/2 w-702rpx overflow-hidden rounded-20rpx bg-white -translate-1/2" @tap.stop>
    <view class="relative">
      <image
        class="h-210rpx w-702rpx"
        src="@/static/images/dispatch_modal_head.png"
      />
      <view class="absolute left-0 top-0 h-210rpx w-702rpx flex flex-col justify-center px-24rpx">
        <view class="text-52rpx text-white font-semibold leading-73rpx">
          系统派单
        </view>
        <view class="text-32rpx text-white leading-45rpx">
          左右滑动查看下一个订单
        </view>
      </view>
    </view>
    <swiper class="min-h-440rpx">
      <swiper-item v-for="order, index in orders" :key="index">
        <view class="p-24rpx">
          <view class="flex items-center justify-between">
            <view class="flex items-center">
              <view class="text-40rpx text-#333333 font-medium leading-40rpx">
                {{ title(order.orderType) }}
              </view>
            </view>
            <view class="flex items-baseline text-#FA662F">
              <view class="text-32rpx">
                ¥
              </view>
              <view class="text-44rpx text-50rpx font-semibold">
                {{ order.price }}
              </view>
            </view>
          </view>
          <Spacer h="12" />
          <view class="rounded-10rpx bg-#F5F5F5 px-24rpx pb-40rpx pt-30rpx">
            <view class="flex items-center justify-between">
              <view class="flex items-center">
                <image
                  class="h-32rpx w-32rpx"
                  src="@/static/images/clock_black_fill.png"
                />
                <Spacer w="24" />
                <view class="text-32rpx text-#333333 font-bold leading-32rpx">
                  {{ order.time }}
                </view>
              </view>
              <view class="text-32rpx text-#3F8BF6 font-bold leading-32rpx">
                [全程{{ order.distance }}km]
              </view>
            </view>
            <Spacer h="32" />
            <view>
              <view class="flex items-center">
                <view class="flex-shrink-0 rounded-10rpx bg-#3F8BF6 p-6rpx text-24rpx text-white leading-24rpx">
                  起
                </view>
                <Spacer w="24" class="flex-shrink-0" />
                <view class="relative flex-1">
                  <view class="line-clamp-1 text-36rpx text-#333333 font-bold leading-50rpx">
                    {{ order.from }}
                  </view>
                  <view class="absolute left-0 top-full mt-12rpx text-32rpx text-#3F8BF6 font-bold leading-32rpx">
                    [距我{{ order.distanceFromStart }}km]
                  </view>
                </view>
              </view>
              <view class="h-90rpx w-32rpx flex items-center justify-center">
                <view class="h-full w-0rpx border-r-1rpx border-r-gray-50 border-dashed" />
              </view>
              <view class="flex items-center">
                <view class="flex-shrink-0 rounded-10rpx bg-#FA662F p-6rpx text-24rpx text-white leading-24rpx">
                  终
                </view>
                <Spacer w="24" class="flex-shrink-0" />
                <view class="line-clamp-1 flex-1 text-36rpx text-#333333 font-bold leading-50rpx">
                  {{ order.to }}
                </view>
              </view>
            </view>
          </view>
        </view>
      </swiper-item>
    </swiper>
    <Spacer h="24" />
    <view class="flex justify-center" @tap="$emit('close')">
      <RGButton width="654">
        我知道了
      </RGButton>
    </view>
    <Spacer h="40" />
  </view>
</template>
